<template>
<!-- 绝对路径 -->
     <div id="app" >
        <div class="container-bg">
            <div class="container-item1"></div>
            <div class="container-item2"></div>   
            <div class="container-item3"></div>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
      return{}
            },
            methods: {
            }
}
</script>
<style scoped>
.container-bg{
    /* 父级定位到正方形 */
    position: relative;
    
    width: 300px;
    height: 300px;
    background: #cfcfcf;
}
.container-item1{
    position:absolute;
    bottom: 0px;
    width: 100px;
    height: 100px;
    background: red;
}
.container-item3{
    position:absolute;
    top: 300px;
    left: 100px;
    width: 100px;
    height: 100px;
    background: red;
}
.container-item2{
    width: 50px;
    height: 50px;
    background: green;
}
</style>
